import React, { useRef, useState } from "react";
import { useModel } from "@umijs/max";
import { Space, Tabs, Form, Button, Input, Select } from "antd";
import { useRequest } from "ahooks";
import CouponListTable from "./CouponListTable";
import { PlusOutlined } from "@ant-design/icons";
import CouponUpdate from "../modals/CouponUpdate";
import { addCoupon } from "../services";
import { couponTypes } from "@/constants/types";

// 切换tab需要刷新的tab
const tabChangeShouldUpdateTab: string [] = [];

const {Item} = Form;

const CouponList = () => {
  const couponRef = useRef();
  const couponSendRef = useRef();
  const [form] = Form.useForm();
  const { getDict } = useModel('dictModel');
  const couponTypes = getDict('couponType');
  const [activeKey, setActiveKey] = useState<string>('coupon');

  const [searchValue, setSearchValue] = useState<Object>({});
  // 
  const [visible, setVisible] = useState(false);
  const {loading, runAsync: addCouponApi} = useRequest(addCoupon, {manual: true});



  const tabChange = (key: string) => {
    setActiveKey(key);  
  }


  const search = () => {
    setTimeout(() => {
      const refObj = tabList.find(v => v.key === activeKey)?.comRef;
      refObj?.current?.refreshTable();
    }, 0)
  }

  const handleSearch = () => {
    const params = form.getFieldsValue();
    setSearchValue(params);
    search();
  }
  const handleReset = () => {
    form.resetFields();
    setSearchValue({});
    search();
  }

  const childrenProps: {activeKey: string; tabChangeShouldUpdateTab: string []; searchValue: any} = {
    activeKey,
    tabChangeShouldUpdateTab,
    searchValue,
  }

  const tabList: Array<any> = [
    {
      title: '优惠券',
      key: 'coupon',
      label: '优惠券',
      comRef: couponRef,
      children: <CouponListTable {...childrenProps} tabKey="coupon" ref={couponRef} />,
    },
    {
      title: '优惠券发放',
      key: 'couponSend',
      label: '优惠券发放',
      comRef: couponSendRef,
      children: <>开发中</>,
    },
  ];


  const couponUpdateProps = {
    title: '新增优惠券',
    visible,
    loading,
    onCancel: () => {
      setVisible(false);
    },
    onSubmit: (params: couponTypes) => {
      addCouponApi(params).then(
        res => {
          debugger;
          if (res?.code === '0') {
            couponUpdateProps.onCancel();
            search();
          }
        }
      )
    }
  }
  
  return (
    <>
      <Form form={form} layout="inline">
        <Item name="name" label={"优惠券名称"}>
          <Input />
        </Item>
        <Item name="type" label={"类型"}>
          <Select style={{width: 150}} allowClear options={couponTypes} />
        </Item>
        <Space>
          <Button type="default" onClick={() => handleReset()}>重置</Button>
          <Button type="primary" onClick={() => handleSearch()}>查询</Button>
        </Space>
      </Form>
      <Tabs
        className="mt20"
        activeKey={activeKey}
        onChange={tabChange}
        items={tabList}
        tabBarExtraContent={{
          right: (
            <Space>
              <Button onClick={() => setVisible(true)} type="primary" icon={<PlusOutlined />}>新增优惠券</Button>
            </Space>
          )
        }} 
      />
      {visible && <CouponUpdate {...couponUpdateProps} />}
    </>
  );
};


export default CouponList;